<template>
  <view class="p-h24">
    <view class="main-view m-t40 p-h24">
      <view class="card flex">
        <text class="flex-1 text-700-130">证书名称：</text>
        <input
          v-model="formState.title"
          class="flex-1 text-700-130 text-r"
          type="text"
          placeholder="请填写"
          placeholder-class="text-400-430"
        />
      </view>
      <view
        class="card flex"
        @click="openDatePicker('start', formState.gettime)"
      >
        <text class="flex-1 text-700-130">获取时间：</text>
        <text v-if="formState.gettime" class="text-700-130">{{
          formState.gettime
        }}</text>
        <text v-else class="text-400-430">请选择</text>
        <image
          class="square-36 m-l10"
          src="@/static/images/public/arrow-3.png"
        />
      </view>
    </view>

    <view class="flex-c">
      <RcButton :width="340" :top="100" text="确认" @click="onSubmit" />
    </view>

    <up-datetime-picker
      v-model="selectedDate"
      :show="showDatePicker"
      :minDate="new Date('1990-01-01').getTime()"
      :maxDate="Date.now()"
      mode="date"
      @confirm="onDatePickerConfirm"
      @cancel="closeDatePicker"
    />
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import RcButton from "@/components/button.vue";
import type { TResumeJob } from "@/types/api.d";
import { useSkillDatePicker } from "./useSkillDatePicker";
import { timeFormat } from "@/utils/utils";

let skillId: number | null = null;

const isUpdate = ref(false);
// 新增状态
const formState = reactive({
  title: "",
  gettime: "",
});

const {
  selected: selectedDate,
  isStartPicker,
  show: showDatePicker,
  open: openDatePicker,
  close: closeDatePicker,
} = useSkillDatePicker();

const onDatePickerConfirm = () => {
  formState.gettime = timeFormat(selectedDate.value);
  closeDatePicker();
};
// 重新加载上一个页面的数据
const reloadPrePage = () => {
  const pages = getCurrentPages();
  const page = pages[pages.length - 2];
  page.$vm.$.exposed.getMyResume();
};

const onSubmit = () => {
  if (!validate()) return;

  const url = isUpdate.value ? "/skill/edit" : "/skill/add";
  const data: Record<string, any> = { ...formState };
  if (isUpdate.value) {
    data.id = skillId;
  }

  uni.$u.post(url, data).then((res) => {
    uni.showToast({ title: res.msg, icon: "none" });

    if (res.code === 1) {
      reloadPrePage();
      uni.navigateBack();
    }
  });
};

const validate = () => {
  if (formState.title === "") {
    uni.showToast({
      title: "请填写证书名称",
      icon: "none",
    });
    return false;
  }
  if (formState.gettime === "") {
    uni.showToast({
      title: "请选择获取时间",
      icon: "none",
    });
    return false;
  }

  return true;
};

onLoad((e) => {
  isUpdate.value = e?.type === "update";

  if (isUpdate.value) {
    uni.setNavigationBarTitle({ title: "编辑职业技能" });
    uni.getStorage({
      key: "RESUME_SKILL_RECORD",
      success: (res) => {
        const record = JSON.parse(res.data) as TResumeJob;
        skillId = record.id;
        formState.title = record.title;
        formState.gettime = record.gettime;
      },
    });
  } else {
    uni.setNavigationBarTitle({ title: "添加职业技能" });
  }
});
</script>

<style lang="scss">
page {
  background-color: $page-color-4;
}
</style>

<style lang="scss" scoped>
.main-view {
  border-radius: 10rpx;
  background-color: $bg-color-1;

  .label {
    line-height: 102rpx;
  }
}

.card {
  height: 102rpx;
  border-top: 1rpx solid $border-color-4;
}
</style>
